<template>
  <div>
    <div class="shousuokuang">
      <span class="span1">回访客户</span>
      <el-select
        :clearable="true"
        @change="selectP"
        v-model="customerId"
        placeholder="请选择"
      >
        <el-option
          v-for="item in personList"
          :key="item.value"
          :label="item.customerName"
          :value="item.customerId"
        >
        </el-option>
      </el-select>

      <span class="span1">回访方式</span>
      <el-select
        @change="selectP"
        :clearable="true"
        v-model="visitMethod"
        placeholder="请选择"
      >
        <el-option
          v-for="item in huifang"
          :key="item.name"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span class="span2">录入人</span>
      <el-select
        @change="selectP"
        :clearable="true"
        v-model="inputUserId"
        placeholder="请选择"
      >
        <el-option
          v-for="item in personList"
          :key="item.value"
          :label="item.inputUserName"
          :value="item.inputUserId"
        >
        </el-option>
      </el-select>

      <span class="demonstration">录入日期</span>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="fss"
        >重置</el-button
      >
    </div>

    <div class="clas">
      <Tanchuan />
    </div>

    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>


      <el-table-column label="回访客户" width="120">
        <template slot-scope="{ row }">{{ row.customerName }}</template>
      </el-table-column>
      <el-table-column label="回访方式" width="120">
        <template slot-scope="{ row }">{{
          row.visitMethod | formater
        }}</template>
      </el-table-column>

      <el-table-column label="回访原因" align="center">
        <template slot-scope="{ row }">{{ row.visitCause }}</template>
      </el-table-column>

      <el-table-column label="回访结果" width="120">
        <template slot-scope="{ row }">{{ row.visitResult }}</template>
      </el-table-column>

      <el-table-column label="回访日期" width="120">
        <template slot-scope="{ row }">{{ row.entryTime }}</template>
      </el-table-column>
      <el-table-column label="录入人" width="120">
        <template slot-scope="{ row }">{{ row.inputUserName }}</template>
      </el-table-column>
      <el-table-column label="录入时间" width="120">
        <template slot-scope="{ row }">{{ row.visitDate }}</template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { GetCustomervisitApi } from "@/request/api";
import { debounce } from "@/utils/debounce";
import Tanchuan from "@/components/Tanchuan";

let that = null;
export default {
  components: { Tanchuan },
  mounted() {
    that = this;
  },
  beforeDestroy() {
    that = null;
  },
  filters: {
    formater(val) {
      if (val == 0) {
        return "电话";
      }
      if (val == 1) {
        return "短信";
      }
      if (val == 2) {
        return "微信";
      }
      if (val == 3) {
        return "QQ";
      }
      if (val == 4) {
        return "上门";
      }
    },
  },
  data() {
    return {
      visitMethod: null,
      inputUserId: null,
      customerName: "",
      customerId: null,
      customer: null,
      personList: [],
      huifang: [
        { name: "电话", value: 0 },
        { name: "短信", value: 1 },
        { name: "微信", value: 2 },
        { name: "QQ", value: 3 },
        { name: "上门", value: 4 },
      ],
      tableData: [],
      multipleSelection: [],
      pageNum: 1, //当前页数
      pageSize: 10, //每页条数
      total: 40, //总页数
      name: "",
      value: "",

      // 这个是下拉筛选
      inputUserName: "",
      // 日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },

  // 调用接口，因为在搜索时也会被调用，所以我们把它封装成一个方法，直接调用方法
  created() {
    GetCustomervisitApi({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      // 去重
      let map = new Map();
      for (let item of res.rows) {
        if (!map.has(item.inputUserName)) {
          map.set(item.inputUserName, item);
        }
      }
      this.personList = [...map.values()];
      // console.log(this.personList);
    });

    this.getTableData({ pageNum: this.pageNum, pageSize: this.pageSize });
  },

  methods: {
    //搜索
    addd() {
      console.log("llll");
      this.tableData = res.rows;
    },
    // 重置按钮
    fss() {
      this.name = "";
      this.inputUserId = "";
      this.customerId = "";
      this.visitMethod = "";
      this.customer = "";
    },
    selectP() {
      this.getTableData({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        inputUserId: this.inputUserId,
        customerId: this.customerId,
        visitMethod: this.visitMethod,
        customer: this.customer,
      });
    },
    selectPp() {
      this.getTableData({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        inputUserId: this.inputUserId,
      });
    },
    search: debounce(function () {
      this.getTableData({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.name,
      });
    }, 1000),

    // 抽取成方法，因为搜索的时候我们也需要调用改接口
    async getTableData(obj) {
      const GetCustomerListApiRes = await GetCustomervisitApi({
        ...obj,
      });
      if (!GetCustomerListApiRes) return;
      console.log(GetCustomerListApiRes);
      this.tableData = GetCustomerListApiRes.rows;
      this.total = GetCustomerListApiRes.total;
    },

    handleSelectionChange() {},
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 当前页数改变的时候执行
      this.pageNum = val;
      this.getTableData({ pageNum: this.pageNum, pageSize: this.pageSize });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.paging {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 0 0;
}
.el-input {
  width: 200px;
}

.el-button {
  margin-left: 20px;
}

.shousuokuang {
  display: flex;
  align-items: center;
  span {
    margin-right: 20px;
    margin-left: 30px;
    white-space: nowrap !important;
  }
}
.clas {
  margin-top: 20px;
  display: flex;

  .plus {
    border-color: rgb(45, 63, 226);
    background-color: rgba(147, 197, 228, 0.3);
    color: rgba(11, 30, 157, 0.3);
    font-weight: 700;
  }
  .el-button {
    width: 84px;
    height: 33px;
  }
  .edit {
    border-color: rgb(74, 225, 134);
    background-color: rgba(198, 240, 189, 0.3);
    color: rgba(3, 70, 9, 0.3);
    font-weight: 700;
  }
  .pluss {
    border-color: yellow;
    background-color: rgba(189, 205, 111, 0.3);
    color: rgba(42, 52, 6, 0.3);
    font-weight: 700;
  }
}
</style>